<template>
  <el-table
    :data="docs"
    class="custom-table thead-bg-color"
    @row-click="rowClick"
    v-loading="loading"
  >
    <el-table-column label="资源名">
      <div slot="header">
        <svg-icon icon-name=""/>
        <span class="m-l-5">资源名</span>
      </div>
      <div slot-scope="{ row }" class="flex align-items-center">
        <el-image v-if="row.img" :src="uploadIcon(row.img)" class="s15 m-r-5" />
        <svg-icon v-else :icon-name="row.icon" class="shrink-0 m-r-5" />
        <el-tag
          v-if="curSpace.id !== row.space.id"
          type="danger"
          disable-transitions
          size="mini"
          class="shrink-0 m-r-5"
          v-text="'社区共享'"
        />
        <el-tag
          v-if="row.good"
          size="mini"
          type="danger"
          disable-transitions
          class="shrink-0 m-r-5"
          v-text="'精'"
        />
        <div class="flex-1 flex flex-wrap" style="min-width: 0;">
          <router-link
            :to="row.path"
            target="_blank"
            @click.native="stopPropagation"
            class="link line1 m-r-10"
            :title="row.title"
            v-text="row.title"
          />
          <el-tag v-for="tag in row.tags" :key="tag" size="mini" disable-transitions v-text="tag" />
        </div>
      </div>
    </el-table-column>
    <el-table-column label="作者" width="140">
      <router-link
        slot-scope="{ row }"
        :to="`/users/${row.author.id}`"
        target="_blank"
        @click.native="stopPropagation"
        class="line1 link"
        :title="row.author.nickname"
      >
        <i class="el-icon-user"></i>
        {{ row.author.nickname }}
      </router-link>
    </el-table-column>
    <el-table-column label="所属空间" width="160">
      <router-link
        slot-scope="{ row }"
        :to="`/spaces/${row.space.id}`"
        target="_blank"
        @click.native="stopPropagation"
        class="line1 link"
        :title="row.space.title"
        v-text="row.space.title"
      />
    </el-table-column>
    <el-table-column label="更新时间" align="right" width="100">
      <timeago2 slot-scope="{ row }" :date-time="row.updated_at" />
    </el-table-column>
  </el-table>
</template>

<script>
import { mapState } from 'vuex';
import FileIconMixin from '@/utils/file-icon-mixin';

export default {
  name: 'search-list',
  mixins: [FileIconMixin],
  props: {
    docs: Array,
    loading: Boolean,
  },
  computed: {
    ...mapState({ curSpace: 'currentSpace' }),
  },
  methods: {
    rowClick(row) {
      const { href } = this.$router.resolve({ path: row.path });
      window.open(href, '_blank');
    },
  },
};
</script>

<style></style>
